<template>
	<view class="album flex-vbox">
		<view class="album-wrap flex-item flex-box" :class="{playing: playing}" @click="eventHandler('changePanel')">
			<view class="album-box">
				<image class="album-cover" src="/static/playing_page_disc.png"></image>
				<image class="album-bg" src="/static/bg.jpg"></image>
			</view>
			<image class="needle" src="/static/playing_page_needle.png"></image>
		</view>
		<view class="flex-box action-bar">
			<view><i class="music-icon music-icon-favourite"></i></view>
			<view><i class="music-icon music-icon-download"></i></view>
			<view><i class="music-icon music-icon-comment"></i></view>
			<view><i class="music-icon music-icon-more"></i></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	computed: {
		playing() {
			return this.$store.state.playing;
		}
	},
	methods: {
		eventHandler(key) {
			this.$emit(key);
		}
	}
}
</script>

<style scoped>
	.album{
		height: 100%;
	}
	.album-wrap{
		align-items: flex-start;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}
	.album-box{
		display: inline-block;
		width: 492rpx;
		height: 492rpx;
		margin-top: 120rpx;
		position: relative;
	}
	.playing .album-box{
		animation: album_rotating linear 16s infinite;
	}
	@keyframes album_rotating{
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(360deg);
		}
	}
	.album-cover{
		width: 492rpx;
		height: 492rpx;
	}
	.album-bg{
		width: 360rpx;
		height: 360rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
	}
	.needle{
		position: absolute;
		width: 198rpx;
		height: 290rpx;
		top: -28rpx;
		left: 50%;
		transform: translateX(-30rpx);
		transform: rotate(-20deg);
		transform-origin: 15% 10%;
		transition: transform .6s;
	}
	.playing .needle{
		transform: rotate(0deg);
	}
	.action-bar{
		justify-content: center;
		font-size: 40rpx;
	}
	.action-bar view{
		padding: 0 16rpx;
	}
</style>
